<template>
	<div class="content-container">
		<div>
			<el-container class="content-row">
				<div class="input-tip">商品名称：</div>
				<div class="input-field">
					<el-input v-model="queryModel.goods"></el-input>
				</div>
				<div class="input-tip">收货人：</div>
				<div class="input-field">
					<el-input v-model="queryModel.consignee"></el-input>
				</div>
				<div class="input-tip">支付时间：</div>
				<div class="input-field">
					<el-date-picker
						v-model="queryModel.payTime"
						type="daterange"
						range-separator="To"
						start-placeholder="Start Date"
						end-placeholder="End Date"
					/>
				</div>
			</el-container>
			
			<el-container class="content-row">
				<div class="input-tip">用户名称：</div>
				<div class="input-field">
					<el-input v-model="queryModel.name"></el-input>
				</div>
				<div class="input-tip">手机号：</div>
				<div class="input-field">
					<el-input v-model="queryModel.phone"></el-input>
				</div>
				<div class="input-tip">发货时间：</div>
				<div class="input-field">
					<el-date-picker
						v-model="queryModel.sendTime"
						type="daterange"
						range-separator="To"
						start-placeholder="Start Date"
						end-placeholder="End Date"
					/>
				</div>
			</el-container>
		</div>
		<div class="content-row">
			<el-container>
				<el-button type="primary" @click="queryData">筛选</el-button>
				<el-button type="danger" @click="clear">清空筛选</el-button>
				<el-button type="primary" @click="exportData">导出</el-button>
				<el-button type="primary" @click="dispathGooods">批量发货</el-button>
				<el-button type="primary" @click="exportDispathGooods">下载批量发货样单</el-button>
			</el-container>
		</div>
		<div>
			<el-tabs type="card" @tab-click="handleClick" model-value="0">
				<el-tab-pane label="全部" name="0"></el-tab-pane>
				<el-tab-pane label="未支付" name="1"></el-tab-pane>
				<el-tab-pane label="已支付" name="2"></el-tab-pane>
				<el-tab-pane label="待发货" name="3"></el-tab-pane>
				<el-tab-pane label="已发货" name="4"></el-tab-pane>
				<el-tab-pane label="支付超时" name="5"></el-tab-pane>
			</el-tabs>
			<el-table
				ref="multipleTable"
				:data="orderList"
				tooltip-effect="dark"
				style="width: 100%"
				@selection-change="handleSelectionChange">
				<el-table-column
					type="selection"
					width="55">
				</el-table-column>
				<el-table-column
					label="商品"
					width="100"
					prop="name">
				</el-table-column>
				<el-table-column
					label="总价/数量"
					width="100"
					prop="price">
				</el-table-column>
				<el-table-column
					label="买家信息"
					width="100"
					prop="buyer">
				</el-table-column>
				<el-table-column
					label="交易时间"
					width="200"
					prop="time">
				</el-table-column>
				<el-table-column
					label="分销信息"
					width="100"
				>
					<template #default="scope">
						<el-tag size="default" :type="scope.row.role ? '' : 'info'">{{
								scope.row.role ? '经理' : '分销员'
							}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					label="状态"
					width="100">
					<template #default="scope">
						<el-tag size="default" :type="scope.row.state ? 'success' : 'danger'">
							{{ scope.row.state ? '已完成' : '未完成' }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					label="操作"
					width="200">
					<template #default="scope">
						<el-button size="small" type="danger" @click="deleteItem(scope.$index)">删除</el-button>
						<el-button size="small" type="primary" @click="callUser(scope)">联系客户</el-button>
					</template>
				</el-table-column>
				<el-table-column
					label="支付方式"
					width="100">
					<template #default="scope">
						<el-tag size="default">{{ scope.row.payType ? '微信' : '支付宝' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					label="来源"
					width="200"
					prop="source">
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
import Mock from "../tools/Mock"
import message from "@/tools/Message";
import Tools from "@/tools/Tools";

export default {
	name: "OrderComp",
	data() {
		return {
			queryModel: {
				goods: "",
				consignee: "",
				payTime: "",
				sendTime: "",
				name: "",
				phone: ""
			},
			orderList: [],
			multipleSelection: []
		}
	},
	mounted() {
		this.orderList = Mock.getOrder(this.$route.params.type)
	},
	props: ["type"],
	methods: {
		queryData() {
			message.info("筛选数据: " + JSON.stringify(this.queryModel))
			this.orderList = Mock.getOrder(this.type)
		},
		clear() {
			this.queryModel = {
				goods: "",
				consignee: "",
				payTime: "",
				sendTime: "",
				name: "",
				phone: ""
			}
			this.orderList = Mock.getOrder(this.type)
		},
		exportData() {
			Tools.exportJsonFile("订单.json", this.orderList)
		},
		dispathGooods() {
			if (this.multipleSelection.length === 0) {
				message.warning("未选择商品订单")
				return
			}
			message.success("批量发货: " + JSON.stringify(this.multipleSelection))
		},
		exportDispathGooods() {
			Tools.exportJsonFile("发货单.json", this.multipleSelection)
		},
		handleSelectionChange(val) {
			this.multipleSelection = val
		},
		handleClick(tab) {
			console.log(tab)
			message.info("切换Tab：" + tab.props.label)
			this.orderList = Mock.getOrder(this.type)
		},
		deleteItem(index) {
			this.orderList.splice(index, 1)
		},
		callUser(scope) {
			let username = scope.row.buyer;
			let phone = scope.row.phone;
			message.alertSuccess(username + ": " + phone)
		}
	},
	beforeRouteUpdate(to) {
		this.orderList = Mock.getOrder(to.params.type)
	}
}
</script>

<style scoped>

</style>